<template>
    <div class="app">
        <myNavbar title="退款"></myNavbar>
        <list>
            <cell>
                    <div class="refund_product">
                        <div class="refund_product_header">
                            <text class="refund_product_header_title">退款商品</text>
                        </div>
                        <div class="refund_product_row" v-for="(item,index) in orderForm.itemList" @click="chooseClick(index)">
<!--                            {{orderForm}}-->
<!--                          {{returnsForm}}-->
                            <div class="refund_product_img">
                                <image :src="item.thumbnail" style="width:120px;height:120px"></image>
                            </div>
                            <div class="refund_product_column">
                                <text class="refund_product_title">{{item.name}}</text>
                                <text class="refund_product_subtitle">{{item.subTitle}}</text>
                            </div>
                            <div class="refund_product_choose">
                                <div class="refund_product_chooseBox">
                                    <icon v-if="item.returnQuantity != 0" style="width: 50px;height:50px;" content="md-checkmark"></icon>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="refund_why">
                        <text class="refund_why_title">退款原因</text>
                        <div class="refund_why_row" @click="chooseBotton">
                            <text class="refund_why_content">{{whyName}}</text>
                            <icon style="width: 50px;height: 50px;" content="ios-arrow-forward"></icon>
                        </div>
                    </div>
                    <div class="refund_details">
                        <div class="refund_details_priceBox">

                          <div class="refund_details_row" v-if="orderForm.subPoint">
                            <text class="refund_details_price_title">兑换券</text>
                            <text class="refund_details_price_number">¥{{orderForm.subPoint}}</text>
                          </div>
                            <div class="refund_details_row" v-else>
                               <text class="refund_details_price_title">退款金额</text>
                              <text class="refund_details_price_number">¥{{returnsForm.amountPayable}}</text>
                            </div>





                          <div class="refund_details_row">
                                <text class="refund_details_price_subtitle">最多{{returnsForm.subPrice}}，含运费 ¥0.00</text>
                            </div>
                        </div>
                        <div class="refund_details_memoBox">
                            <text class="refund_details_memo_title">补充说明</text>
                            <input class="refund_details_memo_input" v-model="memo" placeholder="选填"/>
                        </div>
                    </div>
                    <div class="refund_details_img">
                        <text class="refund_details_img_title">上传凭证 (最多6张)</text>
                        <upload @metaClick="metaClick"></upload>
                    </div>
                    <div class="refund_details_botton botton_Bg_Color" @click="submitClick">
                        <text class="refund_details_botton_title botton_Fz_Color">提交</text>
                    </div>
                    <!-- 弹框 -->
                    <div class="isMase" v-if="whyType == true">
                        <div class="isMask_content">
                            <div class="isMask_content_header">
                                <text class="isMask_content_header_title">退款原因</text>
                                <!--                            <text @click="cancelClick" class="iconfont .icon-close isMask_content_header_icon"></text>-->
                            </div>
                            <div class="isMask_content_content" v-for="(item,index) in choose" @click="chooseWhy(index)">
                                <text class="isMask_content_content_title">{{item.title}}</text>
                                <div class="isMask_content_choose">
                                    <icon v-if="whyIndex == index" style="width: 50px;height:50px"
                                          content="md-checkmark"></icon>
                                </div>
                            </div>
                            <div class="isMask_botton">
                                <div class="isMask_botton_left" @click="cancelClick">
                                    <text class="isMase_botton_title">取消</text>
                                </div>
                                <div class="isMask_botton_right" @click="determineClick">
                                    <text class="isMase_botton_title">确定</text>
                                </div>
                            </div>
                        </div>
                    </div>
            </cell>
        </list>
    </div>
</template>

<script>
    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    import {
        find
    } from '../../../api/order';
    import {
        returns,
        calculate
    } from '../../../api/askfor';
    import {
        add
    } from '../../../api/file';
    import upload from '../../../components/upload/upload.vue'
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    export default {
        data() {
            return {
                choose: [{
                    title: '拍多/拍错/不想要'
                },
                    {
                        title: '信息填写错误，重新拍'
                    },
                    {
                        title: '支付方式错误'
                    },
                    {
                        title: '商品发货太慢'
                    },
                    {
                        title: '其他原因'
                    },
                ],
                whyIndex: 0,
                whyName: '请选择',
                whyType: false,
                previewImgs: [],
                images: [],
                orderForm: {},
                id: '',
                returnsForm: {
                    amountPayable: 0,
                    subPrice: 0
                },
                metaForm: {},
                memo: ''
            }
        },
        created() {
            this.id = eeui.getPageInfo('orderDetails').params
            this.findClick(this.id)
        },
        components:{
            upload,myNavbar
        },
        methods: {
            chooseClick(data) {
                var _this = this

                var index = data
                if (_this.orderForm.itemList[index].returnQuantity == 0) {
                    _this.orderForm.itemList[index].returnQuantity = _this.orderForm.itemList[index].availableReturnQuantity;
                } else if (_this.orderForm.itemList[index].returnQuantity != 0) {
                    _this.orderForm.itemList[index].returnQuantity = 0;
                }
                _this.calculateClick()
            },
            chooseWhy(data) {

                this.whyIndex = data
            },
            cancelClick() {
                this.whyType = false
            },
            determineClick() {
                this.whyType = false
                this.whyName = this.choose[this.whyIndex].title
            },
            chooseBotton() {
                this.whyType = true
            },
            submitClick() {
                var _this = this
                var itemList = []
                _this.orderForm.itemList.forEach(function (item) {
                    if (item.returnQuantity != 0) {
                        itemList.push(item)
                    }
                })
                if (itemList.length == 0) {
                    eeui.toast('请选择退款商品')
                    return
                }
                if (_this.whyName == '请选择') {
                    eeui.toast('请选择退款原因')
                    return
                }
                eeui.confirm({
                    title: "福利有效期风险提醒!",
                    message: "有效期临近，该部分退款如在有效期后到账，将会自动过期。？",
                    buttons: ["取消", "确定"]
                }, function (result) {
                    if (result.status == "click" && result.title == "确定") {
                        _this.returnsClick()
                    }
                });
            },
            findClick(data) {
                var _this = this
                find(data).then(
                    res => {
                        if (res.type == 'success') {
                            _this.orderForm = res.data.order
                            _this.orderForm.itemList.forEach(function (item) {
                                item.availableReturnQuantity = item.quantity - item.returnQuantity
								item.thumbnail = _this.thumbnail(item.thumbnail,120,120)
                            })
                        }
                    }
                ).catch(error => {
                    console.log(error)
                })
            },
            calculateClick() {
                var _this = this
                var itemList = []
                _this.orderForm.itemList.forEach(function (item) {
                    if (item.returnQuantity != 0) {
                        itemList.push(item)
                    }
                })

                calculate(JSON.stringify(itemList), _this.id).then(
                    res => {
                        if (res.type == 'success') {

                            _this.returnsForm = res.data
                        }
                    }
                ).catch(error => {
                    console.log(error)
                })
            },

            returnsClick() {
                var _this = this
                var itemList = []
                _this.orderForm.itemList.forEach(function (item) {
                    if (item.returnQuantity != 0) {
                        itemList.push(item)
                    }
                })
                var memoData = {
                    reason: _this.whyName,
                    memo: _this.memo
                }
                returns(JSON.stringify(itemList), memoData, _this.id).then(
                    res => {
                        if (res.type == 'success') {
                            eeui.closePage()
                            eeui.openPage({
                                    pageName: 'orderRefund',
                                    params: res.data.id,
                                    url: 'root://pages/member/order/refund_details.js',
                                    statusBarType: 'immersion',
                                    statusBarStyle:false
                                },
                                (result) => {

                                }
                            );
                            storage.setItem('order', 'true', event => {
                                console.info('set success')
                            })
                            _this.fileAdd(res.data.id)
                        }
                    }
                ).catch(error => {
                    console.log(error)
                })
            },
            metaClick(data) {
                console.log(data)
                this.metaForm = data
            },
            fileAdd(data) {
                var _this = this
                var metaForm = []
                if (!this.isEmptyString(_this.metaForm) && !this.isEmptyString(_this.metaForm.images != [])) {
                    _this.metaForm.images.forEach(function (item) {
                        var meta = {
                            fileName: 'fileImg',
                            fileType: 0,
                            fileUrl: item,
                            orderType: 'askfor',
                            orderId: data
                        }
                        metaForm.push(meta)
                    })
                }
                if (!this.isEmptyString(_this.metaForm) && !this.isEmptyString(_this.metaForm.video != [])) {
                    _this.metaForm.video.forEach(function (item) {
                        var meta = {
                            fileName: 'fileVideo',
                            fileType: 0,
                            fileUrl: item,
                            orderType: 'askfor',
                            orderId: data
                        }
                        metaForm.push(meta)
                    })
                }
                add(metaForm).then(
                    res => {
                        if (res.type == 'success') {
                            console.log(res)
                        }
                    }
                ).catch(error => {
                    eeui.toast(error.content)
                })
            }
        }
    }
</script>
<style lang="css" src="../../../style/wx.css"/>
<style scoped>
    .app, body {
        background-color: rgba(248, 248, 248, 0.8);
    }
    .app{
        flex: 1;
    }
    .refund_product {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-top: 25px;
        padding: 25px;
        box-sizing: border-box;
        margin-left: 25px;
    }

    .refund_product_header {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 652px;
        padding-bottom: 25px;
        border-bottom-color: rgba(232, 234, 237, 1);
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }

    .refund_product_header_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .refund_product_row {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 25px;
        position: relative;
    }

    .refund_product_img {
        width: 120px;
        height: 120px;
        background: rgba(249, 249, 249, 1);
        border-radius: 4px;
        overflow: hidden;
    }

    .refund_product_column {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20px;
    }

    .refund_product_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        width: 460px;
        display: block;
        text-overflow: ellipsis;
        lines:2
    }

    .refund_product_subtitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
        margin-top: 6px;
        width: 500px;
    }

    .refund_product_choose {
        position: absolute;
        right: 0px;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .refund_product_chooseBox {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-color: rgba(26, 26, 30, 0.3);
        border-style: solid;
        border-width: 1px;
    }

    .refund_product_choose_title {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: #6782c0;
    }

    .refund_why {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-top: 25px;
        padding: 25px;
        box-sizing: border-box;
        margin-left: 25px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .refund_why_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .refund_why_row {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .refund_why_content {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        opacity: 0.3;
    }

    .isMase {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .isMask_content {
        width: 750px;
        height: 760px;
        background-color: rgba(255, 255, 255, 1);
        position: fixed;
        bottom: 0;
        border-top-right-radius: 16px;
        border-top-left-radius: 16px;
    }

    .isMask_content_header {
        width: 670px;
        margin-left: 40px;
        margin-top: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        position: relative;
        padding-bottom: 40px;
    }

    .isMask_content_header_title {
        font-size: 32px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .isMask_content_header_icon {
        position: absolute;
        right: 0;
        font-size: 40px;
        color: rgba(0, 0, 0, 0.3);
    }

    .isMask_content_content {
        width: 670px;
        margin-left: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        margin-top: 20px;
        padding-top: 15px;
        padding-bottom: 15px;
        box-sizing: border-box;
    }

    .isMask_content_content_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .isMask_content_choose {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(235, 89, 79, 1);
    }

    .isMask_content_choose_icon {
        font-size: 28px;
        color: rgba(235, 89, 79, 1);
    }

    .isMask_botton {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        width: 700px;
        margin-left: 25px;
        position: absolute;
        bottom: 40px;
    }

    .isMask_botton_left {
        width: 320px;
        height: 80px;
        background-image: linear-gradient(to bottom, rgba(196, 198, 204, 1), rgba(213, 215, 219, 1));
        /* opacity: 0.2; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .isMase_botton_title {
        font-size: 32px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }

    .isMask_botton_right {
        background-image: linear-gradient(to bottom, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1));
        width: 320px;
        height: 80px;
        /* opacity: 0.2; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .refund_details {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-top: 25px;
        padding: 25px;
        box-sizing: border-box;
        margin-left: 25px;
    }

    .refund_details_priceBox {
        padding-bottom: 28px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgba(232, 234, 237, 1);
    }

    .refund_details_price_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .refund_details_price_number {
        font-size: 28px;
        font-weight: 500;
        color: rgba(235, 89, 79, 1);
        line-height: 42px;
        margin-left: 10px;
    }

    .refund_details_price_subtitle {
        font-size: 20px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 30px;
        opacity: 0.5;
    }

    .refund_details_memo_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .refund_details_memoBox {
        display: flex;
        flex-direction: row;
        margin-top: 28px;
    }

    .refund_details_memo_input {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        opacity: 0.3;
        margin-left: 20px;
        width: 520px;
    }

    .refund_details_img {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-top: 25px;
        padding: 25px;
        box-sizing: border-box;
        margin-left: 25px;
    }

    .refund_details_img_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        display: block;
        margin-bottom: 25px;
    }

    .refund_details_imgBox {
        width: 144px;
        height: 144px;
        border: 1px solid rgba(232, 234, 237, 1);
        border-radius: 2px;
    }

    .refund_details_botton {
        width: 700px;
        height: 74px;
        /* background: linear-gradient(129deg, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1)); */
        border-radius: 4px;
        margin-left: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 100px;
        margin-bottom: 30px;
    }

    .refund_details_botton_title {
        font-size: 32px;
        font-weight: 400;
        /* color: rgba(255, 255, 255, 1); */
    }

    .refund_details_row {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .navbar {
        width: 750px;
        height: 100px;
    }
    .text {
        font-size: 26px;
    }
</style>
